<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam.params"
              @on-search="search"
              @on-reset="onReset"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <detail v-if="state.visiable" :itemId="state.itemId" :visible="state.visiable" @close="handleClose"></detail>
  </page-layout>
</template>
<script>
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { page, remove } from "@/api/module/student/feedback";
import { reactive, createVNode, ref, onMounted } from "vue";
import { message, modal } from "ant-design-vue";
import { filterEmptyByObject } from "@/tools/common";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import dictEnum from "@/const/dict";
import moment from 'moment'

import detail from './modal/detail.vue'
const removeKey = "remove";
export default {
  components: {
    detail
  },
  setup() {
    const tableRef = ref();
    const columns = [
      { dataIndex: "stuName", key: "stuName", title: "姓名" },
      { dataIndex: "phone", key: "phone", title: "联系方式" },
      { dataIndex: "createTime", key: "createTime", title: "提交时间" },
      {
        dataIndex: "backType",
        key: "backType",
        title: "反馈类型",
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.BACK_TYPE]
            ? dictLists.data[dictEnum.BACK_TYPE].find((v) => v.value == data)
            : {};
          return item ? item.label : "";
        },
      },
      { dataIndex: "contentDetail", key: "contentDetail", title: "意见内容" },
      {
        dataIndex: "status",
        key: "status",
        title: "状态",
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.OPERATION_STATUS]
            ? dictLists.data[dictEnum.OPERATION_STATUS].find(
                (v) => v.value == data
              )
            : {};
          return item ? item.label : "";
        },
      },
    ];
    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await page(param);
      return {
        data: response.data.record || [],
        total: response.data.total,
      };
    };
    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: "您是否确定要删除此配置?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          message.loading({ content: "提交中...", key: removeKey });
          remove({ id: record.id }).then((response) => {
            if (response.success) {
              message
                .success({ content: "删除成功", key: removeKey, duration: 1 })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: "删除失败",
                key: removeKey,
                duration: 1,
              });
            }
          });
        },
      });
    };
    /// 行操作
    const operate = [
      {
        label: "详情",
        event: function (record) {
          state.itemId = record.id
          state.visiable = true;
        },
      },
      {
        label: "删除",
        event: function (record) {
          removeMethod(record);
        },
      },
    ];
    const handleClose = (type) => {
      state[type] = false
    }
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    };
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visiable: false,
      itemId: ''
    });
    const searchParam = reactive({
      params: [],
    });
    const dictLists = reactive({
      data: [],
    });
    const search = function (value) {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value),
        createBtime: value.createTime ? moment(value.createTime[0]).valueOf() : undefined,
        createEtime: value.createTime ? moment(value.createTime[1]).valueOf() : undefined,
      };
    };
    const onReset = function () {
      state.param = {};
    };
    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };
    onMounted(async () => {
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.BACK_TYPE,
        dictEnum.OPERATION_STATUS,
      ]);
      searchParam.params = [
        {
          key: "stuName",
          type: "input",
          label: "用户名",
          placeholder: "请输入",
        },
        {
          key: "contentDetail",
          type: "input",
          label: "意见内容",
          placeholder: "请输入",
        },
        {
          dataIndex: "createTime",
          key: "createTime",
          keys: ["createBtime", "createEtime"],
          type: "rangeTime",
          label: "提交时间",
          showTime: { format: "HH:mm:ss" },
          format: "YYYY:MM:DD HH:mm:ss",
          valueFormat: "YYYY:MM:DD HH:mm:ss",
          placeholder: ["开始时间", "结束时间"],
        },
        {
          key: "backType",
          type: "select",
          label: "类型",
          placeholder: "全部",
          options: dictLists.data[dictEnum.BACK_TYPE],
          hidden: true,
        },
        {
          key: "status",
          type: "select",
          label: "操作状态",
          placeholder: "全部",
          options: dictLists.data[dictEnum.OPERATION_STATUS],
          hidden: true,
        },
      ];
    });
    return {
      state,
      fetch,
      search,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,
      tableRef,
      onReset,
      handleClose,
    };
  },
};
</script>
